<template>
	<div class="user">
		<div class="user_main">
			<span class="user_main_ico">
				<img :src="user.userico" />
			</span>
			<span class="user_main_title">{{user.username}}</span>
			<span class="user_main_title_signin">{{user.email}}</span>
			<CustomButton @buttonSignOutClickHandle="signOutClickHandle" :slottype="20">
				<span slot="signout">退出登录</span>
			</CustomButton>
		</div>
		<div class="user_message">
			<Tabs tabsOneTitle="我的关注" tabsTwoTitle="粉丝" type="user">
				<ul slot="follows">
					<li v-for="(item, index) in follows">
						<FollowButton :item="item" :currentUser="currentUser" @refreshFollows="getFollows" type="follow"></FollowButton>
					</li>
				</ul>
				<ul slot="followers">
					<li v-for="(item, index) in followers">
						<FollowButton :item="item" :currentUser="currentUser" @refreshFollows="getFollows" type="follower"></FollowButton>
					</li>
				</ul>
			</Tabs>
		</div>
	</div>
</template>
<script>
	const Cookie = window.Cookie();
	import Axios from 'axios';
	import qs from 'Qs';
	export default{
		name: "user",
		data: function(){
			return {
				user:{},
				follows:[],
				followers:[],
				currentUser:{}
			}
		},
		props:["id"],
		components:{
			CustomButton: r => require.ensure([], () => r(require('../components/button.vue')), 'custom_button'),
			Tabs: r => require.ensure([], () => r(require('../components/tabs.vue')), 'tabs'),
			FollowButton: r => require.ensure([], () => r(require('../components/followbutton.vue')), 'followbutton')
		},
		mounted:function(){
			this.$emit("setDataObject", {type:"user", title:"我的个人中心", showTip:false})
			this.getUserInfoHandle();
		},
		methods:{
			getUserInfoHandle(){
				//console.log(Cookie.get("userToken"))
				const that = this;
				let userToken = Cookie.get("userToken");
				if (!userToken){
					this.$router.push('signin')
				}else{
					userToken = window.stringToJson(userToken, function(a){
						that.$set(that, "currentUser", a);
					});
					const promise = new Promise((a, b) => {
						Axios.post(this.$store.state.api.getUserInfo, qs.stringify({
							ids:userToken.id
						})).then((res) => {
							console.log(res)
							if (res.data.status === 1){
								that.$set(that, "user", res.data.data[0])
								a();
							}else{
								b()
							}
						}).catch((err) => {
							console.log(err)
							b(err)
						})
					});
					promise.then(function() {
						that.getFollows(userToken);
					}, (err) => {

					})
				}
			},
			getFollows:function(userToken){
				const that = this;
				const promise = new Promise((a, b) => {
					Axios.post(that.$store.state.api.getFollowUsers, qs.stringify({
						userid:userToken.id
					})).then((res) => {
						console.log(res)
						if (res.data.status === 1){
							a(res.data.data)
						}else{
							b()
						}
					}).catch((err) => {
						console.log(err)
						b(err)
					})
				});
				promise.then((c) => {
					that.$set(that, "follows", c);
					return new Promise((a, b) => {
						Axios.post(that.$store.state.api.getFollowerUsers, qs.stringify({
							userid:userToken.id
						})).then((res) => {
							console.log(res)
							if (res.data.status === 1){
								a(res.data.data)
							}else{
								b()
							}
						}).catch((err) => {
							console.log(err)
							b(err)
						})
					})
				}, (err) => {

				}).then((c) => {
					that.$set(that, "followers", c);
				}, (err) => {

				})
			},
			signOutClickHandle(e){
				Axios.post(this.$store.state.api.postSignOut).then((res) => {
					if (res.data.status === 1){
						Cookie.set("userToken", '', "0s", "/", ".iliulan.com")
						this.$router.push("/")
					}else{

					}
				}).catch((err) => {

				})
			}
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.user{
		margin:70/@base 0 0;
		.user_main{
			background-color: #fff;
			padding:30/@base 0 10/@base 0;
			.user_main_ico{
				background-color: #ccc;
				display: block;
				width:128/@base;
				height:128/@base;
				border-radius: 128/@base;
				overflow: hidden;
				margin:0 auto;
				img{
					width:100%;
				}
			}
			.custom_button{
				margin:12/@base 16/@base;
				text-align: center;
				background-color: #f6f8fa;
				border:1/@base solid #ccc;
				border-radius: 5/@base;
				line-height: 40/@base;
				a{
					text-decoration: none;
					color:#333;
					font-size: 20/@base;
				}
			}
			.user_main_title{
				display:block;
				text-align: center;
				padding:10/@base 0;
			}
			.user_main_title_signin{
				display: block;
				text-align: center;
				padding:5/@base 0;
				font-size: 16/@base;
				color:#999;
			}
		}
		.user_message{
			background-color: #fff;
			margin:10/@base 0 0;
			.tabs_main_item{
				padding:10/@base 0;
			}
			ul{
				li{
				}
			}
		}
	}
</style>